<template>
  <button type="button" class="BtnAutoSize" :class="calcSize" @click="$emit('click', $event)">
    {{txt}}
  </button>
</template>

<script type="text/ecmascript-6">
  // 根据文本自动设置长度的按钮
  export default {
    props: {
      txt: {
        type: [String, Number],
        required: true
      }
    },
    computed: {
      calcSize () {
        let length = this.txt.replace(/[\u0391-\uFFE5]/g, '**').length // 按照全角半角计算长度
        if (length <= 8) {
          return 'size-s'
        } else if (length <= 12) {
          return 'size-m'
        } else if (length <= 16) {
          return 'size-l'
        } else {
          return 'size-auto'
        }
      }
    }
  }
</script>

<style scoped rel="stylesheet/scss" type="text/scss" lang="scss">
  .BtnAutoSize {
    &.size-s {
      width: 100px;
    }
    &.size-m {
      width: 120px;
    }
    &.size-l {
      width: 140px;
    }
    &.size-auto {
      width: auto;
      padding: 0 5px;
    }
  }
</style>
